<template>
  <div class="payment-container">
    <van-nav-bar
      title="支付订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="payment-content">
      <van-cell-group inset>
        <van-cell title="订单金额" :value="'¥' + orderTotal.toFixed(2)" />
        <van-cell title="支付方式">
          <template #value>
            <van-radio-group v-model="paymentMethod" direction="horizontal">
              <van-radio name="wechat">微信支付</van-radio>
              <van-radio name="alipay">支付宝</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </van-cell-group>
      
      <div class="payment-actions">
        <van-button
          round
          block
          type="primary"
          :loading="loading"
          @click="onPay"
        >
          立即支付
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useOrderStore } from '../stores/order'
import { showToast, showLoadingToast, showSuccessToast } from 'vant'

const route = useRoute()
const router = useRouter()
const orderStore = useOrderStore()

const paymentMethod = ref('wechat')
const loading = ref(false)

const orderTotal = computed(() => {
  const order = orderStore.orders.find(o => o.id === route.query.orderId)
  return order ? order.total : 0
})

const onClickLeft = () => {
  router.back()
}

const onPay = () => {
  loading.value = true
  showLoadingToast({
    message: '支付中...',
    forbidClick: true
  })
  
  // 模拟支付过程
  setTimeout(() => {
    loading.value = false
    showSuccessToast('支付成功')
    orderStore.updateOrderStatus(route.query.orderId, 'completed')
    router.push('/orders')
  }, 2000)
}
</script>

<style scoped>
.payment-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.payment-content {
  padding: 20px;
}

.payment-actions {
  margin-top: 30px;
  padding: 0 16px;
}
</style> 